<template>
	<div class="extract_detail">
		<el-form ref="formDataRef" :inline="true" :model="state.formData" label-width="120px" class="demo-form-inline"></el-form>
		<el-row>
			<el-col :span="6">
				<el-form-item prop="keyWord" label="关键词">
					<el-input
						style="width: 100%"
						maxlength="200"
						@keyup.enter="searchFun()"
						@blur="state.formData.keyWord = $utils.removeBilateralSpaces(state.formData.keyWord)"
						v-model="state.formData.keyWord"
						placeholder="名称、邮箱、手机号"
					/>
				</el-form-item>
			</el-col>
		</el-row>
		<el-table style="width: 100%" :data="state.tableData.data" highlight-current-row @current-change="handleTableCurrentChange">
			<el-table-column prop="orderNumber" label="序号" show-overflow-tooltip></el-table-column>
			<el-table-column prop="email" width="250px" label="邮箱" show-overflow-tooltip></el-table-column>
			<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
			<el-table-column prop="registrationSource" width="100px" label="注册来源" show-overflow-tooltip></el-table-column>
			<el-table-column prop="site" label="站点" show-overflow-tooltip></el-table-column>
			<el-table-column prop="country" label="国家" show-overflow-tooltip></el-table-column>
			<el-table-column prop="transactionAmount" width="120px" label="成交金额" sortable show-overflow-tooltip></el-table-column>
			<el-table-column prop="numberOfTransactions" width="120px" label="成交次数" sortable show-overflow-tooltip></el-table-column>
			<el-table-column prop="lastAmount" width="140px" label="最后一笔金额" sortable show-overflow-tooltip></el-table-column>
			<el-table-column prop="lastOrderTime" width="160px" label="最近下单时间" sortable show-overflow-tooltip></el-table-column>
			<el-table-column prop="isSubscribe" width="100px" label="是否订阅" show-overflow-tooltip></el-table-column>
			<el-table-column prop="label" width="200px" label="客户标签" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="120px" fixed="right">
				<template #default="scope">
					<el-button text type="primary" @click="toDetail(scope.row)">详情</el-button>
					<el-button text type="primary" @click="toDetail(scope.row)">订单</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			class="mt15"
			:pager-count="5"
			:page-sizes="[10, 20, 30]"
			v-model:current="state.tableData.page.current"
			background
			v-model:page-size="state.tableData.page.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="state.tableData.total"
		>
		</el-pagination>
	</div>
</template>
<script setup nama="AddExtractDetail">
import { useCustomerApi } from '/@/api/customer';

const { getCustomerList } = useCustomerApi();

const userInfo = ref();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		page: {
			pageSize: 7,
			current: 1,
			total: 0,
		},
	},
	formData: {
		keyWord: '',
		source: '', // "" 全部
		label: '', // "" 全部
		isItADeal: '', // "" 全部
		isSubscribe: '', // "" 全部
		registrationTime: null,
		lastOrderTime: null,
		numberOfTransactions: 0,
		site: '', // "" 全部
	},
});

const searchFun = () => {};

const getList = async () => {
	try {
		let params = {
			current: state.tableData.page.current,
			pageSize: state.tableData.page.pageSize,
			dealCount: state.formData.numberOfTransactions,
			isDeal: state.formData.isItADeal === '' ? null : state.formData.isItADeal,
			isSubscribe: state.formData.isSubscribe === '' ? null : state.formData.isSubscribe,
			keyword: state.formData.keyWord,
			lastOrderDate: state.formData.lastOrderTime,
			registerDate: state.formData.registrationTime,
			siteId: state.formData.site === '' ? null : state.formData.site,
			sourceType: state.formData.source === '' ? null : state.formData.source,
			tag: state.formData.label === '' ? null : state.formData.label,
		};
		let res = await getCustomerList(params);
		if (res.code !== 200) {
			return;
		}
		state.tableData.loading = false;
		state.tableData.total = res.data.total;
		state.tableData.page = {
			pageSize: res.data.pageSize,
			current: res.data.total,
			total: res.data.total,
		};

		let tempList = [];
		let data = res.data.data;
		tempList = data.map((item, index) => {
			return {
				id: item.id,
				orderNumber: (res.data.current - 1) * 7 + index + 1,
				email: item.email,
				name: (item.firstname ? item.firstname : '') + ' ' + (item.lastname ? item.lastname : ''),
				registrationSource: item.sourceType,
				site: item.site,
				country: item.country,
				transactionAmount: item.totalOrderAmount,
				numberOfTransactions: item.totalOrderCount,
				lastAmount: item.lastOrderAmount,
				lastOrderTime: item.lastOrderTime === null ? '-' : item.lastOrderTime,
				isSubscribe: item.isSubscribe === 1 ? '已订阅' : '未订阅',
				label: item.tag,
			};
		});

		state.tableData.data = tempList;
	} catch (error) {
		state.tableData.loading = false;
		ElMessage({
			type: 'error',
			message: '获取客户信息列表失败',
		});
	}
};

const handleTableCurrentChange = (val) => {
	userInfo.value = val;
};

// 分页改变
const onHandleSizeChange = (val) => {
	state.tableData.page.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val) => {
	state.tableData.page.current = val;
	getList();
};

onMounted(() => {
	getList();
});

defineExpose({
	userInfo,
});
</script>
<style lang="scss"></style>
